<div id="log-container" class="row-fluid">
    <div id="log" class="span12"></div> <!-- #log -->
</div> <!-- #log-container -->

<!-- JavaScript -->
<script type="text/javascript">
    title('{{ _("PHP Proxy Log") }}');
</script>
<script type="text/javascript">
    $(function() {
        resizeLogWindow();
    });

    $(window).resize(function() {
        resizeLogWindow();
    });
</script>
<script type="text/javascript">
    function resizeLogWindow() {
        var windowHeight    = $(window).height(),
            preservedHeight = 220;

        $('#log').css('height', windowHeight - preservedHeight);
    }
</script>
<script type="text/javascript">
    $(function() {
        window.previousOffset  = 0;
        window.offset          = 1;
        window.isAutoScrollLog = true;

        var timer = $.timer(function() {
            getLog();
        });
        timer.set({
            time: 2500,
            autostart: true
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        getLog();
    });
</script>
<script type="text/javascript">
    $('#log').scroll(function() {
        var preservedHeight = $('#log').height() + 10,
            scrollHeight    = $('#log')[0].scrollHeight,
            scrollTop       = $('#log').scrollTop();

        if ( scrollTop + preservedHeight == scrollHeight ) {
            window.isAutoScrollLog = true;
        } else {
            window.isAutoScrollLog = false;
        }
    });
</script>
<script type="text/javascript">
    function scrollLog() {
        if ( window.isAutoScrollLog ) {
            $('#log').scrollTop($('#log')[0].scrollHeight);
        }
    }
</script>
<script type="text/javascript">
    function getLog() {
        var pageRequests = {
            'cmd': 'get_new',
            'last_no': offset
        };

        $.ajax({
            type: 'GET',
            url: 'http://127.0.0.1:8083/log',
            data: pageRequests,
            dataType: 'JSON',
            success: function(result) {
                $.each(result, function(lineNumber, log) {
                    window.offset = lineNumber;

                    var logTemplate = '<p style="color: %s;">%s</p>';
                    if ( window.previousOffset != window.offset ) {
                        $('#log').append(logTemplate.format(getLogColor(getLogLevel(log)), log.replace(/\n/g, '<br>')));
                        scrollLog();
                    }
                });
                window.previousOffset = window.offset;
            }
        });
    }
</script>
<script type="text/javascript">
    function getLogLevel(log) {
        if ( log.indexOf('[DEBUG]') != -1 ) {
            return 'DEBUG';
        } else if ( log.indexOf('[INFO]') != -1 ) {
            return 'INFO';
        } else if ( log.indexOf('[WARNING]') != -1 ) {
            return 'WARNING';
        } else if ( log.indexOf('[ERROR]') != -1 ) {
            return 'ERROR';
        } else if ( log.indexOf('[CRITICAL]') != -1 ) {
            return 'CRITICAL';
        }
        return 'DUMMY';
    }
</script>
<script type="text/javascript">
    function getLogColor(logLevel) {
        var colors = {
            'DUMMY': '#000',
            'DEBUG': '#21610b',
            'INFO': '#000',
            'WARNING': '#ff8000',
            'ERROR': '#fe2e2e',
            'CRITICAL': '#d7df01'
        };

        return colors[logLevel];
    }
</script>